html{
    font-family: sans-serif;
    line-height: 1.15;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
html,body{
    width: 100%;
    height:100%;
    overflow: hidden;
    margin: 0;
}
*, *::before, *::after{
    box-sizing: border-box;
}
* {
    font-size:12px;
}
[contenteditable]{
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}
body{
    margin: 0;
    font-family: "Monospaced Number", "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.65);
    background-color: #fff;
}
.editor{
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.toolbar{
    padding:8px 0;
    width:100%;
    border: 1px solid #E9E9E9;
    height:42px;
    z-index:3;
    -webkit-box-shadow: 0px 8px 12px 0px rgba(0,52,107,0.04);
    -moz-box-shadow: 0px 8px 12px 0px rgba(0,52,107,0.04);
    box-shadow: 0px 8px 12px 0px rgba(0,52,107,0.04);
}
.mainbox{
    width:100%;
    flex:1;
    display: flex;
}
.contextmenu{
    height: 100%;
    background: #F7F9FB;
    width: 200px;
    border-right: 1px solid #E6E9ED;
}
.workspace{
    flex:1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF;
    height:100%;
    overflow: auto;
}

.workspace::-webkit-scrollbar{
    display: none;
}
.attributions{
    width: 320px;
    height: 100%;
    background: #F7F9FB;
    border-left: 1px solid #E6E9ED;

}
#attribute{
    padding:12px 8px;
}
.context-tab{
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
}
.context-tab .context-tab-header{
    width:100%;
    overflow-x: scroll;
    display: flex;
    flex-wrap: nowrap;
    padding:4px 0;
    padding-left:24px;
    background: #FFF;
    border-bottom: solid 1px #C3C3C3;
    box-shadow: 0 4px 8px 0 rgba(0,52,107,0.04) ;
}

.context-tab .context-tab-header::-webkit-scrollbar{
    display: none;
}
.context-tab .context-tab-header::after{
    content: ' ';
    flex:1;
}
.context-tab .context-tab-header .context-tab-title{
    display: inline;
    padding: 2px 4px;
    color:#A3A3A3;
    cursor:default;
}
.context-tab-title .fa{
    font-size:14px !important;
}
.context-tab .context-tab-header .context-tab-title.active {
    color:#ff5a11;
    border:solid 1px #ECECEC;
}

.context-tab .context-tab-content {
    flex:1;
    overflow-y: scroll;
}
.context-tab .context-tab-content::-webkit-scrollbar {
    display: none;
}
.context-tab-content-item {
    display: none;
}
.context-tab-content-item.active {
    display: block;
    height:100%;
    overflow-y:scroll ;
}
.context-tab-content-item::-webkit-scrollbar{
    display: none;
}

.filelist{
    padding:8px 0;
}
.filelist .filelist-item{
    padding:4px 12px;
    padding-left:24px;
}
.filelist .filelist-item.active{
    color:#ff5a11;
    background: #FFF;
}
.filelist .filelist-item .fa{
    margin-right:8px;
}
.phone-box{
    display:inline-block;
    width:375px;
    height:743px;
    border:solid 1px #F3F3F3;
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -ms-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
}
.phonebar{
    line-height: 0;
}
.phone-content{
    height:667px;
}
.phonebar img{
    width:100%;
}
.stylebox{
    padding:0 12px;
}
.column{
    display: flex;
}
.column1{
    flex:1;
}
.column2{
    flex:2;
}
.column3{
    flex:3;
}
.style-row{
    padding:8px 0;
}
input.style-input-box, select.style-input-box{
    outline: none;
    background: #EFEFEF;
    width:80px;
    border:none;
    line-height: 12px;
    border-radius: 0;
    height:12px;
    margin:0 8px;
}
input.style-input-box.mini{
    width:48px;
    margin-right:0;
}
input.style-input-box.mini + input[type=color]{
    margin:0 2px;
}

.fontbox,.borderbox{
    border-top:solid 1px #ECECEC;
}
input.color-box{
    line-height: 12px;
    width:16px;
    height:20px;
    outline: none;
    border:none;
    margin:0 8px;
    padding:0;
}
.font-base-style{
    margin:0 8px;
}
.indent12{
    padding-left:24px;
}
select.style-select{
    line-height: 12px;
    margin:0 8px;
    border:none;
    outline: none;
    height:12px;
    background: #EFEFEF;
}
.uitable{
    padding:8px;
    height: 100%;
    overflow-y:scroll;
}
.uitable::-webkit-scrollbar{
    width:12px;
}

.uitable::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(150,150,150,.3);
    background-color: #F5F5F5;
}
.ui-title{
    padding:4px 32px;
    border-bottom:solid 1px #CCC;
}
.view-table {
    width: 100%;
    text-align:center;
}
.ui-header{
    padding-bottom: 8px;
}
.view-table tr td{
    cursor: default;
}
.view-table tr td:hover{
    background: #f3f3f3;
}
.od-box{
    position:relative;
}
.drag{
    position: absolute;
    top:-4px;
    right:-4px;
}
.view-table .od-view{
    display: none;
}
#editor .preview{
    display: none;
}
.selected{
   border:solid 2px #007aff;
}
.fontRadio{
    width:0;
    height:0;
    opacity: 0;
}
input.fontRadio:checked + label{
    color:#f0ad4e;
}
.uitable p,.attributions input{
    font-size:12px !important;
}
.area {
    min-height: 12px;
    border: dashed 1px #8f8f94;
}
.event-popover{
    display: none;
}
.fitwidth{
    width:100%;
}
.popover-item{
    margin:4px 0;
}